#{extends 'main.html' /} 
#{set title:'Home' /} 





<script>

	// Enables overlay for all elements that are a a with a rel
	function enableOverlay() {
		 $("a[rel]").each( function() {
			 $(this).overlay()
		 });
	}
	
	// make all initially available links overlays
  	$(document).ready( function() {
  		enableOverlay() 
  	});

	/* das soll in index.js sein - von http://www.my-html-codes.com/javascript-tabs-html-5-css3 */
	window.onload=function() {
	
	  // get tab container
	  var container = document.getElementById("tabContainer");
	    // set current tab
	    var navitem = container.querySelector(".tabs ul li");
	    //store which tab we are on
	    var ident = navitem.id.split("_")[1];
	    navitem.parentNode.setAttribute("data-current",ident);
	    //set current tab with class of activetabheader
	    navitem.setAttribute("class","tabActiveHeader");
	
	    //hide two tab contents we don't need
	    var pages = container.querySelectorAll(".tabpage");
	    for (var i = 1; i < pages.length; i++) {
	      pages[i].style.display="none";
	    }
	
	    //this adds click event to tabs
	    var tabs = container.querySelectorAll(".tabs ul li");
	    for (var i = 0; i < tabs.length; i++) {
	      tabs[i].onclick=displayPage;
	    }
	}
	
	// on click of one of tabs
	function displayPage() {
	  var current = this.parentNode.getAttribute("data-current");
	  //remove class of activetabheader and hide old contents
	  document.getElementById("tabHeader_" + current).removeAttribute("class");
	  document.getElementById("tabpage_" + current).style.display="none";
	
	  var ident = this.id.split("_")[1];
	  //add class of activetabheader to new active tab and show contents
	  this.setAttribute("class","tabActiveHeader");
	  document.getElementById("tabpage_" + ident).style.display="block";
	  this.parentNode.setAttribute("data-current",ident);
	}


	$(function() {
		$( "#date" ).datepicker({ nextText: "" , prevText: "" , dateFormat: "dd.mm.yy" , changeMonth: true,	changeYear: true });
	}); 
	 
	// Seaches for a restaurant by the value entered in the search box.
	// Writes the results as list of radio buttons and enables overlays for them
	function findRestaurant() {
		var searchStr = document.getElementById('restaurantSearch').value; 
		var searchAction = #{jsAction @searchRestaurantByZip(':zip') /};
    
		$.getJSON(searchAction({zip: searchStr}), function(result) {
			$('#restaurantSearchResultsList').empty();
			$.each(result, function(index, restaurant){
				$('#restaurantSearchResultsList').append(
						'<input type="radio" name="restaurantchoice" value="' + restaurant.name + '" id="hide" />' 
						+ '<a rel="#mies' + restaurant.id + '">' 
						+ restaurant.name + '</a><br />' );  
			});
			// Call overlay-enabler
			enableOverlay();
		});
	}
		
	// Seaches for a restaurant by the value entered in the search box.
	// Writes the results as list of radio buttons and enables overlays for them
	function findFood() {
		var searchStr = document.getElementById('foodSearch').value; 
		var searchAction = #{jsAction @searchRestaurantByFood(':foodStr') /};
    
		$.getJSON(searchAction({foodStr: searchStr}), function(result) {
			$('#foodSearchResultsList').empty();
			$.each(result, function(index, restaurant){
				$('#foodSearchResultsList').append(
						'<input type="radio" name="restaurantchoice" value="' + restaurant.name + '" id="hide" />' 
						+ '<a rel="#mies' + restaurant.id + '">' 
						+ restaurant.name + '</a><br />' );  
			});
			// Call overlay-enabler
			enableOverlay();
		});
	}

</script>

<div id="steps" class="span-24 last!">
		<img id="firstImage" src="public/images/banner01.jpg" alt="three steps" />
</div>




<div id="main" class="span-24 last">
	
	#{form @AppointmentCreation.invite()}
	<div id="listWrapper" class="span-10 last">
	<div id="padded_box_10">
		<h4>&{'start.chooserestaurant'}</h4>
		<div id="tabContainer">
		    <div class="tabs">
		      <ul>
		      	<li id="tabHeader_1">Alle</li>
		        <li id="tabHeader_2">Nach Ort</li>
		        <li id="tabHeader_3">Nach Speise</li>
		        #{if session.get("username") }
		        	<li id="tabHeader_4">Favoriten</li>
		        #{/if}
		      </ul>
		    </div>
		    <div class="tabscontent">
		    
			<div class="tabpage" id="tabpage_1">
		        #{if restaurantList} 
			        #{list items:restaurantList, as:'restaurant'}
						<input type="radio" name="restaurantchoice" value="${restaurant.name}" id="hide" #{if value=true}checked#{/if} /><a rel="#mies${restaurant.id}">${restaurant.name}</a><br>
					#{/list} 
				#{/if}
			</div>

			<div class="tabpage" id="tabpage_2" style="display: none">
		      	<div id="restaurantSearchField">
		      		<label>Postleitzahl:</label>
		      		<input type="search" name="restaurantSearch" id="restaurantSearch" size=12/>
		      		<input type="button" id="submitButton" class="button" onClick="findRestaurant()" value="Suchen" />
		      	</div>
				<div id="restaurantSearchResults">
					<ul id="restaurantSearchResultsList">
					</ul>
				</div>
			</div>	
			
			<div class="tabpage" id="tabpage_3" style="display: none">
			     	<div id="foodSearchField">
			     		<label>Suchbegriff:</label>
			     		<input type="search" name="foodSearch" id="foodSearch" size=12/>
			     		<input type="button" id="submitButton" class="button" onClick="findFood()" value="Suchen" />
			     	</div>
				<div id="foodSearchResults">
					<ul id="foodSearchResultsList">
					</ul>
				</div>
			</div>	
		        
			#{if session.get("username") }
			<div class="tabpage" id="tabpage_4" style="display: none">
			  #{if favoriteList}
			  	#{list items:favoriteList, as:'restaurant'}
			  		<input type="radio" name="restaurantchoice" value="${restaurant.name}" id="hide"><a rel="#mies${restaurant.id}">${restaurant.name}</a><br>
			  	#{/list}
			  #{/if} 
			  #{else}
			  	Noch keine Favoriten hinzugef&uuml;gt
			  #{/else}
			</div>
			#{/if}
		      
		    </div>
		  </div>
	</div>				
	</div>
	
	<div class="span-14 last">
		<div id="padded_box_10">
		<h4>&{'start.choosedatetime'}</h4>
	
		<div class="span-5">
			<label>Datum: </label><input type="text" id="date" size=12 name="_date">			
		</div>
		<div class="span-5">	
			<label>Uhrzeit: </label><select id="hour" type="time" name="_time">
		 		<option value="11:00">11:00</option>
		 		<option value="11:30">11:30</option>
		 		<option value="12:00">12:00</option>
		 		<option value="12:30">12:30</option>
		 		<option value="13:00">13:00</option>
		 		<option value="13:30">13:30</option>
		 		<option value="14:00">14:00</option>
		 		<option value="14:30">14:30</option>
		 		<option value="15:00">15:00</option>
		 		<option value="15:30">15:30</option>
		 		<option value="16:00">16:00</option>
		 		<option value="16:30">16:30</option>
		 		<option value="17:00">17:00</option>
		 		<option value="17:30">17:30</option>
		 		<option value="18:00">18:00</option>
		 		<option value="18:30">18:30</option>
		 		<option value="19:00">19:00</option>
		 		<option value="19:30">19:30</option>
		 		<option value="20:00">20:00</option>
		 		<option value="20:30">20:30</option>
		 		<option value="21:00">21:00</option>
		 		<option value="21:30">21:30</option>
		</select>
	</div>
	<div class="span-3 right last">
		<input align="middle" id = "submitButton" type="submit" class="button" value ="Weiter" onclick ="makeAppointment()">
	</div>
	<div class="span-14 last">
	<div id="padded_box_10">
		<iframe width="100%" height="350" frameborder="0" scrolling="no"
														marginheight="0" marginwidth="0"
														src="https://maps.google.de/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=augustiner+m%C3%BCnchen&amp;aq=&amp;sll=51.151786,10.415039&amp;sspn=8.632247,26.784668&amp;t=m&amp;ie=UTF8&amp;hq=augustiner&amp;hnear=M%C3%BCnchen,+Oberbayern,+Bayern&amp;ll=48.136996,11.573582&amp;spn=0.022912,0.025749&amp;z=14&amp;output=embed"></iframe>
	</div>
	</div>
	</div>
	#{/form} 
</div>


<!-- OVERLAY THINGS -->
#{if restaurantList} 
#{list items:restaurantList, as:'restaurant'}
	<div class="simple_overlay" id="mies${restaurant.id}">
		<img class="picture_overlay" src="public/images/restaurant-pics/restaurant${restaurant.id}.jpg" width="400px" height="200px"></img>
		<div class="description_overlay">
				<span class="txt_white_bold">${restaurant.name}</span><br /><br />
				Kategorie: ${restaurant.category}<br />
				Adresse: ${restaurant.address.street}, ${restaurant.address.zip}&nbsp;${restaurant.address.city} <br />
				Telefon: ${restaurant.address.phone}<br />
				<br />
				<a class="whitelink" href="@{Application.restaurantdetail(restaurant.id)}">Detail Ansicht</a><br />
				#{if session.get("username")}
					<a class="whitelink" href="@{AppointmentCreation.addToFavorite(restaurant.id)}">Zu Favoriten hinzuf&uuml;gen</a>
				#{/if}	
		</div>
	</div>
#{/list} 
#{/if}


#{ifErrors}
<script>
		
	$(function(){ // this will run when the document.ready event fires
	    //()$("#miesepeter").overlay(); // this will show a div whose id is myDivOverlay
			$("#miesepeter").overlay({

			    // custom top position
			    top: 100,

			    // some mask tweaks suitable for facebox-looking dialogs
			    mask: {

			    // you might also consider a "transparent" color for the mask
			    color: '#fff',

			    // load mask a little faster
			    loadSpeed: 200,

			    // very transparent
			    opacity: 0.5
			    },

			    // disable this for modal dialog-type of overlays
			    closeOnClick: true,

			    // load it immediately after the construction
			    load: true

			    });
	});
	
</script>



<div class="simple_overlay_error" id="miesepeter">
	<h1>Oops!</h1>

   #{errors}
       <li>${error}</li>
   #{/errors}
</div>
#{/ifErrors}


</div>
